<template>
  <el-menu
    default-active="2-1"
    class="el-menu-vertical-demo"
    :default-openeds="['2']"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><UserFilled /></el-icon>
        <span>控制台</span>
      </template>
      <el-menu-item index="1-1" @click="menuClick('/admin')">
        <span>用户管理</span>
      </el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Menu /></el-icon>
        <span>网站管理</span>
      </template>
      <el-menu-item index="2-1" @click="menuClick('/information')">
        <span>图书管理</span>
      </el-menu-item>
      <el-menu-item index="2-2" @click="menuClick('/orders')">
        <span>订单管理</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script setup>
import useCurrentInstance from "@/global/useCurrentInstance";
import { UserFilled, Menu } from "@element-plus/icons-vue";
// import { useRouter } from "vue-router";
const { proxy } = useCurrentInstance();
const handleOpen = (key, keyPath) => {
  // console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  // console.log(key, keyPath);
};
// const router = useRouter();
const menuClick = (url) => {
  proxy.$router.push({ path: url });
};
</script>
<style>
.el-menu {
  background-color: rgb(236, 243, 237);
  width: 200px;
  height: 100%;
  border-right: none;
}
</style>